/**
 * 大事记时间线
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { BigEventC, NoDataC, SecondHeaderC } from '../../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin } from 'antd';

@Form.create()
class MemorabiliaTimeline extends PureComponent {
  state = {
    xAxis: undefined,
    series: undefined,
  };

  componentDidMount() {
    const { searchData } = this.props;
    if (this.props.searchData && this.props.searchData.portfolioCode) {
      this.getData({
        port_id: searchData?.portfolioCode,
      });
    }
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData({
        port_id: nextProps.searchData?.portfolioCode,
      });
    }
  }
  componentWillUnmount() {
    // 离开前清除models数据
  }
  // 获取echarts数据
  getData = (searchProps) => {
    this.props.dispatch({
      type: 'netValueInProM/getTimeLine',
      payload: searchProps,
    });
  };
  render() {
    const {
      netValueInProM: { bigEventData },
      colorType,
    } = this.props;
    const bdDate = bigEventData.bdDate;
    const edDate = bigEventData.edDate;
    const series = bigEventData.series;
    return (
      <div style={{ width: '100%', height: '377px' }}>
        {/* 大事记时间线 */}
        <SecondHeaderC title='大事记时间线' colorType={colorType} />
        <Spin spinning={this.props.loading.effects['netValueInProM/getTimeLine'] == true}>
          {series?.length > 0 && bdDate && edDate ? (
            <BigEventC beginDate={bdDate} endDate={edDate} series={series} height='340px' showBorder={false} size='small' loading={this.props.loading} colorType={colorType} />
          ) : (
            <NoDataC />
          )}
        </Spin>
      </div>
    );
  }
}
export default connect(({ netValueInProM, loading }) => ({
  netValueInProM,
  loading,
}))(MemorabiliaTimeline);
